<template>
  <div class="goods df">
    <div class="nav fn">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item  @click="onChange" v-for="item in goodlist"  :key="item" :title="item" />
      </van-sidebar>
    </div>
    <div class="main f1 ">
      <div class="bs-wapper">
        <div class="goods-list">
          <!-- 商品 -->
          <div v-for="(item,index) in goodsData" :key="item.name" :id="'g'+index"
            class="goods-item">
            <div class="good-name">
              {{item.name}}
            </div>
            <!-- 食品列表 -->
            <div class="foods-list">
              <!-- 食品 -->
              <van-card v-for="subItem in item.foods"
                :key="subItem.id" num="0" :price="subItem.price"
                :desc="subItem.goodsDesc" :title="subItem.name"
                :thumb="subItem.imgUrl">
                <template #tags>
                  <van-tag plain type="danger">月销售：{{subItem.sellCount}}
                  </van-tag>
                </template>
                <template #footer>
                  <van-stepper theme="round" button-size="22" disable-input />
                </template>
              </van-card>

            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { mapActions, mapGetters, mapState } from "vuex";
import BScroll from '@better-scroll/core'
@Component({
  methods: {
    ...mapActions(["get_goods_data"]),
    
  },
  computed: {
    ...mapState(["goodsData"]),
    ...mapGetters(["goodlist"]),
  },
})
export default class Goods extends Vue {
  activeKey: Number = 0;
  get_goods_data: any;
  bs2:any
  //设置一个loading
  loading: boolean = false;
  onChange(index:number) {
       this.bs2.scrollToElement("#"+"g"+index, 1000)
       this.loading=true
      };
  created() {
    this.get_goods_data();
  }
   mounted() {
    setTimeout(() => {
      this.$nextTick(() => {
        let bs1 = new BScroll(".nav", {
          // ...... 详见配置项
          scrollY: true,
          click: true,
          
        });
      });
    }, 200);

    setTimeout(() => {
      this.$nextTick(() => {
       this.bs2 = new BScroll(".bs-wapper", {
          // ...... 详见配置项
          scrollY: true,
          click: true,
          probeType: 3,
        });
        const goodsNodeList = document.querySelectorAll(".goods-item");
        let heightList = [...(<any>goodsNodeList)].map((v: HTMLDivElement) => {
          return v.clientHeight;
        });
         //监听右侧滚动事件
        this.bs2.on("scroll", (position: any) => {
          //如果loading 为true 就不改变activeKey 的值
          if (this.loading) return;
          //获取当前滚动条高度
          let y = Math.abs(position.y);
          heightList.reduce((total, cur, index) => {
            // 滚动条高度大于前面盒子的高度的和 小于 前面的和+当前盒子高度  找到当前盒子的索引
            if (y > total && y < total + cur) {
              //把当前盒子滚动的索引 赋值给 左侧导航选中索引
              this.activeKey = index;
            }
            return total + cur;
          }, 0);

          //监听滚动停止 把loading还原为false
          this.bs2.on("scrollEnd", () => {
            this.loading = false;
          });
        });
      });
    }, 200);
  }
}
</script>
<style lang="scss" scoped>
.goods {
  height: 100%;
  .nav {
    height: 100%;
  }
  .main {
    height: 100%;
  }
  p {
    height: 40px;
  }
}
.van-sidebar-item--select::before {
  background-color: #ffc300;
}
.goods-list {
  .good-name {
    background: darkgray;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
    color: #666;
  }
}
.van-sidebar-item:last-child {
  padding-bottom: 50px;
}
.bs-wapper {
  height: 100%;
}
</style>